﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="wfForgotPassword.aspx.cs" Inherits="msBsc.WebUi.wMall.Public.wfForgotPassword" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>忘记密码</title>
    <link href="/jqPlugin/SelectSimu/css/base.css" rel="stylesheet" />
    <link href="/themes/wStyle1/css/sLayout.css" rel="stylesheet" />
    <style type="text/css">
        .viewPC_head {
            border-bottom: none !important;
        }

        .viewPC {
            width: 1200px;
            display: table;
            margin: auto;
            border: 1px solid #e5e5e5;
            border-top: 3px solid #3398dc;
        }

        .password_box {
            margin: 0 auto;
            min-height: 600px;
            width: 1200px;
        }

        .password {
            font-size: 14px;
        }

        .flowsteps {
            height: 48px;
            margin: 44px auto 16px;
            width: 1036px;
        }

            .flowsteps ol {
                margin: 0;
                overflow: hidden;
                padding: 0;
            }

            .flowsteps .num4 li {
                width: 25%;
                background: url("/themes/wStyle1/Images/Public1/nodone.png") repeat-x scroll 0 13px rgba(0, 0, 0, 0);
                color: #8b8b8b;
                display: inline;
                float: left;
                font-family: "微软雅黑","黑体","华文细黑";
                font-size: 14px;
                height: 48px;
                line-height: 23px;
                list-style: outside none none;
                position: relative;
            }

                .flowsteps .num4 li span {
                    float: left;
                    width: auto;
                    position: absolute;
                    right: 0px;
                    left: 0px;
                }

                    .flowsteps .num4 li span i {
                        background: url("/themes/wStyle1/Images/Public1/nocurrent.png") no-repeat;
                        color: #fff;
                        display: block;
                        font-size: 16px;
                        font-style: normal;
                        font-weight: bold;
                        height: 30px;
                        line-height: 30px;
                        text-align: center;
                        width: 30px;
                        margin: auto;
                    }


                    .flowsteps .num4 li span em {
                        display: block;
                        text-align: center;
                        color: #999;
                    }

                .flowsteps .num4 li.done {
                    background: url("/themes/wStyle1/Images/Public1/done.png") repeat-x scroll 0 13px rgba(0, 0, 0, 0);
                }

                    .flowsteps .num4 li.done span i {
                        background: url("/themes/wStyle1/Images/Public1/done-fk.png") no-repeat;
                    }

                .flowsteps .num4 li.current {
                    background: url("/themes/wStyle1/Images/Public1/current_l.png") repeat-x scroll 0 13px rgba(0, 0, 0, 0);
                }

                    .flowsteps .num4 li.current span i {
                        background: url("/themes/wStyle1/Images/Public1/current.png") no-repeat;
                    }

        .kv_item {
            margin-top: 30px;
            text-align: left;
            display: table;
        }

            .kv_item .kv_label {
                width: 200px;
                float: left;
                text-align: right;
                height: 34px;
                line-height: 34px;
            }

                .kv_item .kv_label span {
                    margin-right: 20px;
                    font-family: 微软雅黑;
                    font-size: 14px;
                    color: #999;
                }

            .kv_item .kv_content {
                float: left;
                width: 1000px;
                height: 34px;
                position: relative;
            }

                .kv_item .kv_content .i_text {
                    height: 32px;
                    line-height: 32px;
                    border: 1px solid #bcbcbc;
                    width: 305px;
                }

                .kv_item .kv_content .i_textshort {
                    height: 32px;
                    line-height: 32px;
                    border: 1px solid #bcbcbc;
                    width: 235px;
                    float: left;
                }

                .kv_item .kv_content .img_validata {
                    float: left;
                    height: 34px;
                    width: 65px;
                    margin-left: 5px;
                }

                    .kv_item .kv_content .img_validata img {
                        width: 65px;
                        height: 34px;
                    }

                .kv_item .kv_content .place_holder {
                    color: #999;
                    display: inline;
                    left: 5px;
                    line-height: 32px;
                    position: absolute;
                    top: 0px;
                }

            .kv_item .btn {
                margin-left: 200px;
                width: 305px;
                height: 34px;
                border: none;
                background: #1692cd;
                text-align: center;
                color: #fff;
                line-height: 34px;
                font-family: 微软雅黑;
                font-size: 18px;
                cursor: pointer;
            }
    </style>
</head>
<body>
    <%=msBsc.WebUi.Code.QtHtmlGet.GetHeader("找回密码") %>
    <div class="viewPC">
        <div class="password_box">
            <div class="password">
                <div class="flowsteps">
                    <ol class="num4">
                        <li class="current">
                            <span>
                                <i>1</i>
                                <em>输入账户名</em>
                            </span>
                        </li>
                        <li>
                            <span>
                                <i>2</i>
                                <em>验证身份</em>
                            </span>
                        </li>
                        <li>
                            <span>
                                <i>3</i>
                                <em>重置密码</em>
                            </span>
                        </li>
                        <li>
                            <span>
                                <i>4</i>
                                <em>完成</em>
                            </span>
                        </li>
                    </ol>
                </div>

            </div>
            <div class="kv_list">
                <div class="kv_item">
                    <div class="kv_label">
                        <span>账户名:</span>
                    </div>
                    <div class="kv_content">
                        <input id="J_username_input" class="i_text" type="text" value="" name="accountName">
                        <span id="J_username_ph" class="place_holder" style="">请输入您的账户名</span>
                    </div>
                </div>
                <div class="kv_item">
                    <div class="kv_label">
                        <span>验证码:</span>
                    </div>
                    <div class="kv_content">
                        <input id="J_checkcode_input" class="i_textshort" type="text" autocomplete="off" maxlength="4" value="" name="checkCode">
                        <div id="imgValidata" class="img_validata"></div>

                    </div>
                </div>
                <div class="kv_item">
                    <button class="btn" type="button" onclick="Accounts(0,this)">下一步 </button>
                </div>
            </div>
            <div class="kv_list" style="display: none;">
                <div class="kv_item">
                    <div class="kv_label">
                        <span>邮箱:</span>
                    </div>
                    <div class="kv_content">
                        <input id="J_useremail_input" class="i_text" type="text" value="" readonly="true" name="emali">
                    </div>
                </div>
                <div class="kv_item">
                    <input id="J_btn_phone_code" class="btn" type="button" onclick="SendEmail()" value="免费获取重置路径" />
                </div>
            </div>
        </div>
        <!--start JS引用-->
        <script src="/jqPlugin/js/jquery-1.8.3.min.js"></script>
        <script src="/jqPlugin/js/jBase.js"></script>
        <script src="/jqPlugin/js/jBPage.js"></script>
        <script src="/jqPlugin/js/laytpl.js"></script>
        <script src="/jqPlugin/SelectSimu/js/SelectSimu.js"></script>
        <script src="/themes/wStyle1/js/comm/jsLayout.js"></script>
        <script src="/themes/wStyle1/js/comm/VerifyJs.js"></script>
        <script type="text/javascript">
            (function () {
                jQuery.getValidateImg('imgValidata');

                $("#J_username_input").val("");
                $("#J_checkcode_input").val("");
                $("#J_useremail_input").val("");
                $("#J_emailcode_input").val("");
                $("#J_username_input").live("focus", function () {
                    $("#J_username_ph").hide();
                });
                $("#J_username_input").live("blur", function () {
                    if (IsNull($(this).val())) {
                        $("#J_username_ph").show();
                    }
                })
            })()
            var userCode = "", userName = "";
            function btnDo(sEbtn) {
                GtGrid1Action = sEbtn;
                var opart = new jsonRow();
                opart.AddCell("ACTION", GtGrid1Action);
                if (sEbtn == "userCode") {
                    opart.AddCell("Code", userCode);
                    opart.AddCell("userName", userName);
                }
                ajaxComm(opart);
            };

            function firstNext(index) {
                $(".num4 li").eq(index).removeClass("current");
                $(".num4 li").eq(index).addClass("done");
                $(".num4 li").eq(index + 1).addClass("current");
                $(".kv_list").hide();
                $(".kv_list").eq(index + 1).show();
            }

            function Accounts() {
                userName = $("#J_username_input").val();
                if (!vfcUser(userName)) {
                    return;
                }
                userCode = $("#J_checkcode_input").val();
                if (!vfcCode(userCode)) {
                    return;
                }
                btnDo("userCode");
            }

            function SendEmail() {
                var account = $("#J_username_input").val();
                var email = $("#J_useremail_input").val();
                var opart = new jsonRow();
                opart.AddCell("ACTION", "sendEmail");
                opart.AddCell("account", account);
                opart.AddCell("email", email);
                ajaxComm(opart);
            }



            //验证用户名
            function vfcUser(UserNameStr) {
                if (IsNull(UserNameStr)) {
                    alert("账户名不能为空");
                    return false;
                }
                if (!IsEmail(UserNameStr)) {
                    alert("账户名只能是邮箱");
                    return false;
                }
                return true;
            }



            //验证验证码
            function vfcCode(ValidataCode) {
                if (ValidataCode.length != 4) {
                    alert("验证码长度只能是四位");
                    return false;
                }
                if (!isStr(ValidataCode)) {
                    alert("验证码只能是数字和字母组合");
                    return false;
                }
                return true;
            }
        </script>
        <!--end JS引用-->
        <%=msBsc.WebUi.Code.QtHtmlGet.GetFloorHtml() %>
    </div>
</body>
</html>
